import React, { useEffect, useState } from 'react'
import AppHeader from '../../components/app-header/AppHeader'
import Taro from '@tarojs/taro'
import { Map, View, Image, Text, Button } from '@tarojs/components'
import { liveStockInfo, mapWlInfo, pastureMapInfo } from '../../api/map'
import './netMap.scss'

export default function NetMap() {

  const [latitude, setLatitude] = useState(0)
  const [longitude, setLongitude] = useState(0)

  const [status, setStatus] = useState(0)

  // 牧场位置信息
  const PastureMapInfo = async () => {
    const res = await pastureMapInfo({ orgid: '' })
    const data = res.data
    // console.log(data);
    setLatitude(Number(data.centerlat))
    setLongitude(Number(data.centerlng))
  }

  // 围栏坐标信息
  const [wlList, setWlList] = useState([])
  const mapWlListInfo = async () => {
    const res = await mapWlInfo({ orgid: '' })
    // 经纬度数组
    const path = JSON.parse(res.data.F_Map).paths
    const list = []
    path.forEach(item => {
      list.push({ latitude: item.lat, longitude: item.lng })
    })
    setWlList(list)
  }

  // 设置markers标记点用于在地图上显示标记的位置
  const circlesList = wlList.map((item, index) => ({
    id: index,
    latitude: item.latitude,
    longitude: item.longitude,
    iconPath: '../../assets/images/circle.png',
    width: 16,
    height: 16,
    anchor: {
      x: .5,
      y: .5
    }
  }))



  // 接收SelectLivestock跳转页面传递过来的参数
  const [cattle, setCattle] = useState({
    name: '',
    IMEI: '',
    positionTime: ''
  })
  const getVal = () => {
    Taro.eventCenter.on('selectInfo', (info) => {
      // console.log(info);
      getPosition(info)
      if (info.status != 0) {
        setStatus(info.status)
      }
    })
  }
  // 根据牲畜获取最新坐标
  const [cattlePosition, setCattlePosition] = useState({
    id: 20,
    latitude: 26.337999,
    longitude: 108.014018,
    iconPath: '../../assets/images/bear1.png',
    width: 30,
    height: 30,
    anchor: {
      x: .5,
      y: .5
    }
  })
  const getPosition = async (value) => {
    const data = {
      orgid: '',
      livestockid: value.id
    }
    const res = await liveStockInfo(data)
    setCattle({
      name: value.name,
      IMEI: value.iMei,
      positionTime: res.data.F_SensorDt
    })
    setCattlePosition({
      id: circlesList.length + 1,
      latitude: Number(res.data.lat),
      longitude: Number(res.data.lng),
      iconPath: '../../assets/images/bear1.png',
      width: 30,
      height: 30,
      anchor: {
        x: .5,
        y: .5
      }
    })
  }

  const list = circlesList.concat(cattlePosition)

  const toPath = () => {
    Taro.navigateTo({
      url: '/pages/netMap/selectLivestock/SelectLivestock',
    })
    console.log('去选择牲畜界面')
  }

  useEffect(() => {
    PastureMapInfo()
    mapWlListInfo()
    getVal()
  }, [])

  return (
    <View className='map'>
      <AppHeader title='围栏' top='true' bar='true'></AppHeader>
      {/* {JSON.stringify(circlesList)} */}
      {/* 地图 */}

      <Map
        longitude={longitude}
        latitude={latitude}
        // 标记点用于在地图上显示标记的位置
        // markers={circlesList}
        markers={list}
        // 气泡
        // 多边形
        polygons={[{
          points: wlList,
          fillColor: '#B1E5BA',
          strokeWidth: 2,
          strokeColor: '#26c526',
        }]}
      >
      </Map>
      {status == 0 ? <View className='btn' onClick={toPath}>手动点名</View> :
        <View className='cell'>
          {/* 标题区域 */}
          <View className='title'>
            <View className="info">
              <Image></Image>
              <View className='info-content'>
                <p>{cattle.name}</p>
                <p className='imei'>{cattle.IMEI}</p>
              </View>
            </View>
            <View className="change-btn" onClick={toPath}>切换</View>
          </View>
          {/* 内容区域 */}
          <View className="content">
            <View className='text'>定位时间 : {cattle.positionTime}</View>
            <View className='content-btn'>
              <Button type='primary'>地图导航</Button>
              <Button type='primary'>直线导航</Button>
            </View>
          </View>
        </View>
      }
    </View>
  )
}
